<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>个人中心</title>
</head>
<body>
<jsp:include page="/incloud/header.jsp"/>

<div class="d-flex align-items-stretch">
    <!-- Sidebar Navigation-->
    <jsp:include page="/incloud/sidebar.jsp"/>
    <!-- Sidebar Navigation end-->
    <div class="page-content">
        <div class="page-header">
            <div class="container-fluid">
                <h2 class="h5 no-margin-bottom">个人中心</h2>
            </div>
        </div>
        <section class="no-padding-bottom">
            <!-- Form Elements -->
            <div class="col-lg-12">
                <div class="block">
                    <div class="title"><strong>我的头像</strong></div>
                    <div class="avatar"><img src="../img/avatar-6.jpg" id="pic" alt="加载中..."
                                             style="width: 150px;height: 150px"
                                             class="img-thumbnail rounded-circle"></div>
                    <div style="margin-top: 15px" class="text-left">
                        <!-- 真正的文件上传表单 -->
                        <input name="pic" type="file" id="picFile" style="display: none"/>
                    </div>
                    <div class="title">
                        <br>
                        <p class="h5"><strong>关注数：</strong><span>&nbsp;</span><span>&nbsp;</span><span id="focus">52</span></p>
                        <br>
                        <p class="h5"><strong>被看数：</strong><span>&nbsp;</span><span>&nbsp;</span><span id="look">1168</span>
                        </p>
                        <br>
                    </div>
                    <div class="title"><strong>我的数据</strong></div>
                    <div class="block-body">
                        <form class="form-horizontal" id="detailForm">
                            <div class="form-group row">
                                <label class="col-sm-3 form-control-label">真实姓名</label>
                                <div class="col-sm-9">
                                    <input type="text" value="东方标准" name="realName" id="realName"
                                           class="form-control">
                                </div>
                            </div>
                            <div class="line"></div>
                            <div class="form-group row">
                                <label class="col-sm-3 form-control-label">所属部门</label>
                                <div class="col-sm-9">
                                    <select class="selectpicker" data-live-search="true" id="department">
                                        <option value="研发部">研发部</option>
                                        <option value="推广部">推广部</option>
                                        <option value="行政部">行政部</option>
                                        <option value="财务部">财务部</option>
                                        <option value="总裁办公室">总裁办公室</option>
                                        <option value="秘书部">秘书部</option>
                                        <option value="市场部">市场部</option>
                                        <option value="宣传部">宣传部</option>
                                        <option value="销售部">销售部</option>
                                    </select>
                                </div>
                            </div>
                            <div class="line"></div>
                            <div class="form-group row">
                                <label class="col-sm-3 form-control-label">电话</label>
                                <div class="col-sm-9">
                                    <input type="text" value="020-xxxxxxxx" name="phone" class="form-control">
                                </div>
                            </div>
                            <div class="line"></div>
                            <div class="form-group row">
                                <label class="col-sm-3 form-control-label">年龄</label>
                                <div class="col-sm-9">
                                    <input type="text" placeholder="20" name="age" class="form-control">
                                </div>
                            </div>
                            <div class="line"></div>
                            <div class="form-group row">
                                <label class="col-sm-3 form-control-label">个人信息</label>
                                <div class="col-sm-9">
											<textarea placeholder="请输入个人信息"
                                                      class="form-control" name="info">大家好...</textarea>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-3 form-control-label">性别 </label>
                                <div class="col-sm-9">

                                    <div class="i-checks">
                                        <input id="radioCustom1" type="radio" value="1" name="gender"
                                               class="radio-template">
                                        <label for="radioCustom1">男</label>
                                        <span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span>
                                        <input id="radioCustom2" type="radio" value="0" name="gender"
                                               class="radio-template">
                                        <label for="radioCustom2">女</label>
                                    </div>
                                </div>


                            </div>
                            <div class="line"></div>
                            <div class="form-group row">
                                <label class="col-sm-3 form-control-label">注册时间</label>
                                <div class="col-sm-9">
                                    <input type="text" disabled="" placeholder="2019-10-30 09:30:00"
                                           class="form-control" name="registerTime">
                                </div>
                            </div>
                            <div class="line"></div>
                            <div class="form-group row">
                                <label class="col-sm-3 form-control-label">登录时间</label>
                                <div class="col-sm-9">
                                    <input type="text" disabled="" placeholder="2019-10-30 19:30:00"
                                           class="form-control" name="loginTime">
                                </div>
                            </div>
                            <div class="line"></div>

                            <div class="form-group row">
                                <label class="col-sm-3 form-control-label">是否私密 <br><small class="text-primary">默认为否，可以不设置</small></label>
                                <div class="col-sm-9">
                                    <div class="i-checks">
                                        <input id="checkboxCustom1" type="checkbox" value="isSecret" name="isSecret"
                                               class="checkbox-template">
                                        <label for="checkboxCustom1">是否私密</label>
                                    </div>

                                </div>


                            </div>
                            <div class="line"></div>
                            <div class="text-center">
                                <input type="submit" class="btn btn-primary" value="保存">
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </section>

        <jsp:include page="/incloud/footer.jsp"/>
    </div>
</div>


</body>
</html>
<script>
    $(function () {
        // 直接绑定点击事件到 #picFile
        $("#picFile").change(function () {
            const file = this.files[0];
            if (file.size > 1024 * 1024 * 2) {
                alert("图片大小不能超过2M");
                return;
            }

            const url = URL.createObjectURL(file);
            $("#pic").attr("src", url);

            // 文件大小校验通过后，构建表单数据并上传
            const formData = new FormData();
            formData.append("pic", file);

            $.ajax({
                url: "/user/uploadPic",
                type: "post",
                data: formData,
                processData: false,
                contentType: false,
                success: function (data) {
                    if (data.code == 200) {
                        $("#pic").data("objectUrl", data.data);
                        console.log(data.data)
                    } else {
                        alert(data.msg);
                    }
                },
                error: function (xhr, status, error) {
                    alert("上传失败，请稍后再试");
                }
            });
        });

        // 点击 #pic 触发 #picFile 的点击事件
        $("#pic").click(function () {
            $("#picFile").click();
        });
    });

    $(function () {
        $.ajax({
            url: "/user/getCurrentUserDetail",
            type: "get",
            dataType: "json",
            success: function (data) {
                if (data.code == 200) {
                    // 更新头像
                    $("#pic").attr("src", data.data.pic);
                    $("#picFile").attr("src", data.data.pic);

                    $("#look").html(data.data.look);
                    $("#focus").html(data.data.focusCount)

                    // 更新真实姓名
                    $("#realName").val(data.data.realName);

                    // 更新所属部门
                    var departmentValue = data.data.deptName;
                    if ($("#department option[value='" + departmentValue + "']").length) {
                        $("#department").val(departmentValue).change();
                    } else {
                        console.warn("Department value not found in dropdown: " + departmentValue);
                    }

                    // 更新电话
                    $("input[name='phone']").val(data.data.phone);

                    // 更新年龄
                    $("input[name='age']").val(data.data.age);

                    // 更新个人信息
                    $("textarea[name='info']").val(data.data.info);

                    // 更新性别
                    if (data.data.gender == "1") {
                        $("#radioCustom1").prop("checked", true); // 男
                    } else if (data.data.gender == "0") {
                        $("#radioCustom2").prop("checked", true); // 女
                    }
                    //更新是否私密
                    if (data.data.isSecret == "1") {
                        $("#checkboxCustom1").prop("checked", true); // 是
                    } else if (data.data.isSecret == "0") {
                        $("#checkboxCustom2").prop("checked", true); // 否
                    }
                    // 更新注册时间
                    $("input[name='registerTime']").val(data.data.registerTime);

                    // 更新登录时间
                    $("input[name='loginTime']").val(data.data.loginTime);
                } else {
                    // 如果返回的状态码不是200，显示错误信息
                    alert("获取用户信息失败：" + data.message);
                }
            }
            , error: function (data) {
                alert("获取用户信息失败：" + data.message);
            }
        })
    })

    $('#detailForm').submit(function (event) {
        event.preventDefault();

        // 如果图片是通过 createObjectURL 创建的预览地址，则在提交表单时释放
        const objectUrl = $("#pic").data("objectUrl");
        $("#pic").attr("src", objectUrl);
        console.log(objectUrl);

        var formData = {
            realName: $("#realName").val(),
            deptName: $("#department").val(),
            phone: $("input[name='phone']").val(),
            age: $("input[name='age']").val(),
            info: $("textarea[name='info']").val(),
            gender: $("input[name='gender']:checked").val(),
            pic: $("#pic").attr("src"),
            isSecret: $("input[name='isSecret']:checked").val() ? "1" : "0"
        };

        $.ajax({
            url: "/user/updateCurrentUserDetail",
            type: "post",
            data: formData,
            dataType: "json",
            success: function (data) {
                if (data.code == 200) {
                    layer.msg(data.msg, {icon: 2, time: 1000}, function () {
                        URL.revokeObjectURL(objectUrl);
                        window.location.reload();
                    })
                } else {
                    layer.msg(data.msg, {icon: 2, time: 1000});
                }
            }
        });
    });
</script>
